<template>
    <div class="head-line">添加考核</div>
    <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 100%"
        class="demo-form-inline">
        <el-form-item label="部门目标">
            <el-input v-model="form_datas.departmentweektarget" />
        </el-form-item>

        <el-form-item label="考核名称">
            <el-input v-model="form_datas.departmentname" />
        </el-form-item>

        <el-form-item label="考核部门">
            <el-input v-model="form_datas.departmentassessment" />
        </el-form-item>

        <el-form-item label="考核范围">
            <el-input v-model="form_datas.scopeassessment" />
        </el-form-item>

        <!-- <el-form-item label="考核标题">
            <el-input v-model="form_datas.timeassessment" />
        </el-form-item> -->

        <el-form-item label="添加考题">
            <el-input v-model="form_datas.examtext" />
        </el-form-item>

        <el-form-item label="A：">
            <el-input v-model="form_datas.examoptionsa" />
        </el-form-item>

        <el-form-item label="B：">
            <el-input v-model="form_datas.examoptionsb" />
        </el-form-item>

        <el-form-item label="C：">
            <el-input v-model="form_datas.examoptionsc" />
        </el-form-item>

        <el-form-item label="D：">
            <el-input v-model="form_datas.examoptionsd" />
        </el-form-item>

        <el-form-item label="正确答案">
            <el-input v-model="form_datas.examanswer" />
        </el-form-item>
    </el-form>

    <div class="but-box">
        <el-button type="primary" size="default" @click="saveDatas">添加考核</el-button>
    </div>

</template>
<script>
    import { ref, reactive } from "vue";
    import axios from 'axios';
    export default {
        name: 'SupfilemdNav',
        setup() {

            // 部门对象数据
            let form_datas = reactive({
                scopeassessment: "",
                timeassessment: "",
                departmentweektarget: "",
                departmentname: "",
                departmentassessment: "",
                contentassessment: "",
                examtitle: "",
                examtext: "",
                examanswer: "",
                examoptionsa: "",
                examoptionsb: "",
                examoptionsc: "",
                examoptionsd: "",
            })

            let labelPosition = ref('top');

            // 提交添加
            function saveDatas() {

                // console.log("被选中数据", value);
                let url = "http://localhost:8080/departments";
                axios.post(url, {
                    scopeassessment: form_datas.scopeassessment,
                    timeassessment: form_datas.timeassessment,
                    departmentweektarget: form_datas.departmentweektarget,
                    departmentname: form_datas.departmentname,
                    departmentassessment: form_datas.departmentassessment,
                    contentassessment: form_datas.contentassessment,

                })
                    .then(function (response) {
                        // console.log("添加成功", response);
                        ElMessage({
                            message: '考核添加成功！',
                            type: 'success',
                        })
                    })
                    .catch(function (error) {
                        // console.log(error);
                        ElMessage.error('考核添加失败！');
                    })

                axios.post("http://localhost:8080/exams", {
                    examtitle: form_datas.departmentname,
                    examtext: form_datas.examtext,
                    examanswer: form_datas.examanswer,
                    examoptionsa: form_datas.examoptionsa,
                    examoptionsb: form_datas.examoptionsb,
                    examoptionsc: form_datas.examoptionsc,
                    examoptionsd: form_datas.examoptionsd
                })
                    .then(function (response) {
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            }

            return {
                labelPosition,
                form_datas,
                saveDatas,
            }
        }
    }
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .head-line {
        width: 100%;
        height: 50px;
        position: relative;
        line-height: 50px;
        /* border: 1px solid red; */
        font-weight: 600;
        background: #fff;
        padding-left: 20px;
        /* margin-bottom: 15px; */
    }

    .head-line::after {
        content: "";
        position: absolute;
        left: 0;
        top: 16px;
        margin-left: 10px;
        display: block;
        width: 3.5px;
        height: 18px;
        background: #51B37F;
        border-radius: 5px;
        /* border: 1px solid red; */
    }

    .el-form {
        /* height: 250px; */
        padding: 0 500px 0 20px;
        background: #fff;
        /* border: 1px solid red; */
    }

    .v-md-editor {
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .but-box {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        /* border: 1px solid red; */
    }

    .el-button {
        /* margin-top: 15px; */
        padding: 0 10px;
        /* margin-bottom: 15px; */
        background: #51B37F;
    }
</style>